<template>
  <div class="base-layout">
    <!-- 顶部导航栏 -->
    <header class="layout-header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo">{{ appName }}</div>
        </div>
        <div class="header-center">
          <slot name="header-center" />
        </div>
        <div class="header-right">
          <slot name="header-right" />
        </div>
      </div>
    </header>

    <!-- 主体区域 -->
    <div class="layout-body">
      <!-- 左侧边栏 -->
      <aside v-if="showSidebar" class="layout-sidebar">
        <div class="sidebar-content">
          <slot name="sidebar" />
        </div>
      </aside>

      <!-- 主内容区 -->
      <main class="layout-main">
        <div class="dynamic-panel-container">
          <slot>
            <!-- 动态组件容器 -->
            <div class="dynamic-content-wrapper">
              <component :is="currentComponent" />
            </div>
          </slot>
        </div>
      </main>

      <!-- 右侧边栏 -->
      <aside v-if="showRightSidebar" class="layout-right-sidebar">
        <div class="sidebar-content">
          <slot name="right-sidebar" />
        </div>
      </aside>
    </div>

    <!-- 底部 -->
    <footer v-if="showFooter" class="layout-footer">
      <div class="footer-content">
        <slot name="footer">
          <p>&copy; {{ currentYear }} {{ appName }}. All rights reserved.</p>
        </slot>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  appName: {
    type: String,
    default: 'App'
  },
  showSidebar: {
    type: Boolean,
    default: true
  },
  showRightSidebar: {
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  sidebarWidth: {
    type: String,
    default: '250px'
  },
  rightSidebarWidth: {
    type: String,
    default: '300px'
  },
  currentComponent: {
    type: [String, Object],
    default: null
  }
})

const currentYear = computed(() => new Date().getFullYear())
</script>

<style scoped>
/* 基础布局设置 */
.base-layout {
  --header-height: 60px;
  --footer-height: 50px;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

/* 头部样式 */
.layout-header {
  height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 主体区域 - 关键修改部分 */
.layout-body {
  flex: 1;
  display: flex;
  min-height: 0; /* 允许flex子项收缩 */
  height: calc(100vh - var(--header-height) - var(--footer-height, 0px));
  overflow: hidden; /* 禁止外层滚动 */
}

/* 侧边栏样式 */
.layout-sidebar {
  width: v-bind('props.sidebarWidth');
  background: #fff;
  border-right: 1px solid #e0e0e0;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sidebar-content {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

/* 主内容区 - 关键修改部分 */
.layout-main {
  flex: 1;
  min-width: 0;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dynamic-panel-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 动态内容容器 - 关键修改部分 */
.dynamic-content-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 确保所有动态组件都能正确继承高度 */
.dynamic-content-wrapper > * {
  flex: 1;
  min-height: min-content;
}

/* 右侧边栏 */
.layout-right-sidebar {
  width: v-bind('props.rightSidebarWidth');
  background: #fff;
  border-left: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/* 底部样式 */
.layout-footer {
  height: var(--footer-height);
  background: #fff;
  border-top: 1px solid #e0e0e0;
  padding: 16px 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .layout-sidebar {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    height: calc(100vh - var(--header-height));
    z-index: 999;
    transition: left 0.3s ease;
  }

  .layout-sidebar.mobile-open {
    left: 0;
  }

  .layout-right-sidebar {
    display: none;
  }
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
